<template>
  <div class="app-container">
    <iframe id="bdIframe"  :src="url" style="width:100%; height: 100%"/>
<!--    <div id="kefu">-->
<!--      <el-popover-->
<!--        placement="left-end"-->
<!--        trigger="click"-->
<!--      >-->
<!--        <p style="text-align: center;">登录提示：微信扫一扫出账号、密码</p>-->
<!--        <img src="../../../assets/images/druid.jpg" style="width: 200px;">-->
<!--        <label slot="reference" class="topBtn" title="登录提示" />-->
<!--      </el-popover>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: 'Mysql',
  data() {
    return {
      url: process.env.VUE_APP_BASE_API + '/druid/index.html',
      loginUsername: 'ants',
      loginPassword: 'ants_123'
    }
  },
  mounted() {

    this.changeMobsfIframe()
  },
  methods: {
    /**
     * iframe-高自适应显示
     */
    changeMobsfIframe() {
      const oIframe = document.getElementById('bdIframe');
      const deviceHeight = document.documentElement.clientHeight;
      oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
    }
  }
}
</script>
<style>
#kefu {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 999;
  width: 60px;
  height: 60px;
}
#kefu .topBtn {
  width: 60px;
  height: 60px;
  /*background-color: #f2f2f2;*/
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  -webkit-animation: wobble 250ms infinite;
  animation: wobble 250ms infinite;
  background-image: url('../../../assets/images/tips.png');
}
</style>
<style scoped>

</style>
